import React, { Component } from 'react';
import Head from './Head';
import rechagreImg from './recharge.jpg';
import './recharge.css';
import Amount from './Amount';
import { Modal, List, Button, Toast } from 'antd-mobile';
import {post} from '../../../Lib/Http';
import apiUrl from '../../../Config/web';

class Recharge extends Component {

    constructor(props){
        super(props);

        this.state = {
            list:{
                3:[300, 3, 100, 0],
                6:[600, 6, 200, 0],
                10:[1000, 10, 1000, 1],
                20:[2000, 20, 2000, 0]
            },
            map:[3, 6, 10, 20],
            money:10,
            modal2: false,
            amount:1000,
            form:''
        }

    }

    componentDidMount(){
        let that = this;
        let _b_url = that.props.history.location.pathname;
        window._hmt.push(['_trackPageview', _b_url]);
    }

    selectPrice(e){
        let node = e.target;
        let money = node.getAttribute('data-money');
        let newObject = {};

        for(let x in this.state.list){
            let data = this.state.list[x];
            if(x === money){
                data[3] = 1;
            } else{
                data[3] = 0;
            }
            newObject[x] = data;
        }

        let info = this.state.list[money];

        this.setState({
            list:newObject,
            money:info[1],
            amount:info[0]
        });

    }

    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
          [key]: true,
        });
    }

    buy(e){

        Toast.loading('loading...', 10);

        let money = this.state.money;
        let that = this;

        post(apiUrl.create_order, {money:money}, function(success){

            Toast.hide();

            if(success.status !== 200){
                return;
            }

            that.setState({
                form:success.data
            });

            document.forms['alipaysubmit'].submit();

            return;
        }, function(error){

            Toast.hide();

            console.log(error);
        });

    }

    onClose = key => () => {
        console.log('close');
        this.setState({
          [key]: false,
        });
      }

    render() {

        let list = this.state.list;
        let map = this.state.map;


        return (
            <div className="re-root">
                <Head url='/user' history={this.props.history} title='充值饼干' />

                <div className="recharge-banner">
                    <img alt="充值宣传" src={rechagreImg} />
                </div>

                <div className="re-padding"></div>

                {
                    map.map((value, index)=>{
                        return (
                            <Amount selectFunc={this.selectPrice.bind(this)} select={list[value][3]} key={index} amount={list[value][0]} money={list[value][1]} present={list[value][2]} ></Amount>
                        )
                    })
                }

                <div className="recharge-row-box">
                    <div onClick={this.showModal('modal2')} className="re-button">
                        确认充值
                    </div>
                </div>

                <Modal  popup  visible={this.state.modal2} onClose={this.onClose('modal2')} animationType="slide-up">
                    <List renderHeader={() => <div>充值方式</div>} className="popup-list">
                        {['花费'+this.state.money+'￥,充值'+this.state.amount+'饼干'].map((i, index) => (
                        <List.Item key={index}>{i}</List.Item>
                        ))}
                        <List.Item>
                            <Button type="primary" onClick={(e)=>this.buy(e)}>支付宝</Button>
                        </List.Item>
                    </List>
                </Modal>
                <div style={{'display':'none'}} dangerouslySetInnerHTML={{__html:this.state.form}}></div>               
            </div>
        );
    }
}

export default Recharge;